
<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="优惠券名称" >
                <AInput allow-clear v-model:value="state.formData.title"></AInput>
            </AFormItem>
            <AFormItem label="门槛类型" >
                <ASelect allow-clear v-model:value="state.formData.threshold">
                    <ASelectOption :value="thresholdEnum.Amount">满金额</ASelectOption>
                    <ASelectOption :value="thresholdEnum.Quantity">满数量</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="优惠类型" >
                <ASelect allow-clear v-model:value="state.formData.type">
                    <ASelectOption :value="preferentialEnum.Subtraction">减钱</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Discount">打折</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="优惠券状态" >
                <ASelect allow-clear v-model:value="state.formData.status">
                    <ASelectOption :value="1">待审核</ASelectOption>
                    <ASelectOption :value="2">已审核</ASelectOption>
                    <ASelectOption :value="3">已驳回</ASelectOption>
                    <ASelectOption :value="4">启用</ASelectOption>
                    <ASelectOption :value="5">禁用</ASelectOption>
                    <ASelectOption :value="6">已过期</ASelectOption>
                </ASelect>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div style="margin-bottom: 10px;">
            <AButton type="primary" :currentCoupon="state.currentCoupon" @click="addCoupon">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <CouponModal 
    :current-coupon="state.currentCoupon" 
    v-if="state.goodsModalVisibel"
    @cancel="cancelCouponModal"
    @ok="goodsModalOk"></CouponModal>
</template>
<script lang="ts" setup>
import {reactive,h} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { CouponTypes,CommontTypes, PageResult, ResponseVo, preferentialEnum, thresholdEnum} from "@/type"
import { CouponService } from "@/service";
import CouponModal from "./components/CouponModal.vue"
import {Button} from "ant-design-vue";

const columns = [
    {title:"优惠券标题",dataIndex:"title"},
    {title:"门槛",dataIndex:"threshold",customRender:({record}:{record:CouponTypes.ICouponItem})=>{
        let text:string = "";
        if(record.threshold === thresholdEnum.Amount)text="满金额";
        if(record.threshold === thresholdEnum.Quantity)text="满数量";
        return h('div',{},`${text}`);
    }},
    {title:"门槛值",dataIndex:"thresholdNum"},
    {title:"优惠内容",dataIndex:"type",customRender:({record}:{record:CouponTypes.ICouponItem})=>{
        let text:string = "";
        if(record.type === preferentialEnum.Discount)text="打折";
        if(record.type === preferentialEnum.Subtraction)text="减钱";
        return h('div',{},`${text}`);
    }},
    {title:"优惠数值",dataIndex:"value"},
    {title:"发放数量",dataIndex:"quantity"},
    {title:"领取数量",dataIndex:"takeCount"},
    {title:"使用数量",dataIndex:"usedCount"},
    {title:"优惠券状态",dataIndex:"status"},
    {title:"修改人",customRender:({record}:{record:CouponTypes.ICouponItem})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
    {title:"操作",customRender:({record}:{record:CouponTypes.ICouponItem})=>{
        return h('div',{},[
            h(Button,{type:"text",onClick:()=>editCoupon(record)},"编辑")
        ])
    }}
]

const state = reactive<{
    formData: CouponTypes.PageCouponType,
    pagination:CommontTypes.IPagination,
    dataSource:CouponTypes.ICouponItem[],
    goodsModalVisibel: boolean,
    currentCoupon:Partial<CouponTypes.ICouponItem>
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    goodsModalVisibel:false,
    currentCoupon:{}
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<CouponTypes.ICouponItem>>= await CouponService.pageCoupon({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addCoupon = ()=>{
    state.goodsModalVisibel = true;
    state.currentCoupon = {};
}

const editCoupon = async(record:CouponTypes.ICouponItem)=>{
    state.currentCoupon ={};
    let res:ResponseVo<CouponTypes.ICouponItem> =await CouponService.detailCoupon(record.id);
        console.log(res)
    if(res.code===0){
        state.currentCoupon = {...res.data};
        state.goodsModalVisibel = true;
    }
}

const cancelCouponModal = ()=>{
    state.goodsModalVisibel = false;
}

const goodsModalOk = ()=>{
    state.goodsModalVisibel = false;
    state.pagination.pageNum=1;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>